<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main">
        <div class="page navbar-fixed" data-page="home">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">List Index</div>
              <div class="right"></div>
            </div>
          </div><div class="list-index"></div>
<div class="page-content">
<div class="list simple-list contacts-list indexed-list-init">
<div class="list-group">
<ul>
<li class="list-group-title">A</li>
<li>Aaron</li>
<li>Adam</li>
<li>Aiden</li>
<li>Albert</li>
<li>Alex</li>
<li>Alexander</li>
<li>Alfie</li>
<li>Archie</li>
<li>Arthur</li>
<li>Austin</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">B</li>
<li>Benjamin</li>
<li>Blake</li>
<li>Bobby</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">C</li>
<li>Caleb</li>
<li>Callum</li>
<li>Cameron</li>
<li>Charles</li>
<li>Charlie</li>
<li>Connor</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">D</li>
<li>Daniel</li>
<li>David</li>
<li>Dexter</li>
<li>Dylan</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">E</li>
<li>Edward</li>
<li>Elijah</li>
<li>Elliot</li>
<li>Elliott</li>
<li>Ethan</li>
<li>Evan</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">F</li>
<li>Felix</li>
<li>Finlay</li>
<li>Finley</li>
<li>Frankie</li>
<li>Freddie</li>
<li>Frederick</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">G</li>
<li>Gabriel</li>
<li>George</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">H</li>
<li>Harley</li>
<li>Harrison</li>
<li>Harry</li>
<li>Harvey</li>
<li>Henry</li>
<li>Hugo</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">I</li>
<li>Ibrahim</li>
<li>Isaac</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">J</li>
<li>Jack</li>
<li>Jacob</li>
<li>Jake</li>
<li>James</li>
<li>Jamie</li>
<li>Jayden</li>
<li>Jenson</li>
<li>Joseph</li>
<li>Joshua</li>
<li>Jude</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">K</li>
<li>Kai</li>
<li>Kian</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">L</li>
<li>Leo</li>
<li>Leon</li>
<li>Lewis</li>
<li>Liam</li>
<li>Logan</li>
<li>Louie</li>
<li>Louis</li>
<li>Luca</li>
<li>Lucas</li>
<li>Luke</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">M</li>
<li>Mason</li>
<li>Matthew</li>
<li>Max</li>
<li>Michael</li>
<li>Mohammad</li>
<li>Mohammed</li>
<li>Muhammad</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">N</li>
<li>Nathan</li>
<li>Noah</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">O</li>
<li>Oliver</li>
<li>Ollie</li>
<li>Oscar</li>
<li>Owen</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">R</li>
<li>Reuben</li>
<li>Riley</li>
<li>Robert</li>
<li>Ronnie</li>
<li>Rory</li>
<li>Ryan</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">S</li>
<li>Samuel</li>
<li>Sebastian</li>
<li>Seth</li>
<li>Sonny</li>
<li>Stanley</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">T</li>
<li>Teddy</li>
<li>Theo</li>
<li>Theodore</li>
<li>Thomas</li>
<li>Toby</li>
<li>Tommy</li>
<li>Tyler</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">W</li>
<li>William</li>
</ul>
</div>
<div class="list-group">
<ul>
<li class="list-group-title">Z</li>
<li>Zachary</li>
</ul>
</div>
</div>
</div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var listIndex = app.listIndex.create({
        // ".list-index" element
        el: '.list-index',
        // List el where to look indexes and scroll for
        listEl: '.contacts-list',
        // Generate indexes automatically based on ".list-group-title" and ".item-divider"
        indexes: 'auto',
        // Scroll list on indexes click and touchmove
        scrollList: true,
        // Enable bubble label when swiping over indexes
        label: true,
      });
    </script>
  </body>
</html>